<template>
  <zk-topBg
    showStash
    paddingTop="30"
    :showBack="true"
    title="归还管理"></zk-topBg>
  <view id="inventoryManagement">
    <view class="search_box flex">
      <view class="search_item flex">
        <zk-selectBox
          v-model:modelValue="ReturnStatus"
          value="DictCode"
          label="DictName"
          peaseSelect="借调状态"
          :options="IMreturnstore.returnStatusList.StatusList">
        </zk-selectBox>
        <zk-selectBox
          v-model:modelValue="ReturnType"
          value="DictCode"
          label="DictName"
          peaseSelect="借调类型"
          :options="IMreturnstore.returnTypeList.TypeList">
        </zk-selectBox>
        <view class="date_box">
          <zk-date v-model:date="date"></zk-date>
        </view>
        <view class="ipt_box">
          <zk-input clearable v-model:value="searchParam"></zk-input>
        </view>
        <zk-btn iconType="search" @click="search">查询</zk-btn>
      </view>
    </view>
    <view class="table_box">
      <!-- 头部 -->
      <view class="table_header">
        <view class="table_header_item">
          <!-- 表头 -->
          <view
            class="title fs_16"
            v-for="(item, index) in IMreturnstore.IMreturn_tableHeader"
            :key="index">
            {{ item }}
          </view>
        </view>
      </view>
      <!-- 表格 -->
      <scroll-view scroll-y>
        <view class="table_body">
          <view
            v-for="(item, index) in IMreturnstore.IMreturn_list.Returnlist"
            :key="index"
            class="table_body_item">
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.LoanCode }}
              </view>
            </view>
            <!-- 借调类型 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.RegisterTypeName }}
              </view>
            </view>
            <!-- 借调时间 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.RegisterDate }}
              </view>
            </view>
            <!-- 借调状态 -->
            <view class="table_body_item_cell text_overflow">
              <view
                :class="[
                  item.RegisterStatus == 'BorrowSubmit'
                    ? 'color_yellow'
                    : item.RegisterStatus == 'BorrowEdit'
                    ? 'color_red'
                    : 'color_green',
                ]"
                class="fs_14 text_overflow">
                {{
                  item.RegisterStatusName ? item.RegisterStatusName : "编辑中"
                }}
              </view>
            </view>
            <!-- 借调人 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.Borrower }}
              </view>
            </view>
            <!-- 归还人 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.Returnee }}
              </view>
            </view>
            <!-- 操作 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 flex handle_Box color_green">
                <view
                  v-if="item.RegisterStatus == 'BorrowNoReturn'"
                  @tap="editReturnOrder(item)">
                  编辑
                </view>
                <view v-else @tap="goDetail(item)"> 详情 </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="pagination">
        <zk-pagination
          :total="IMreturnstore.totalCount"
          @event-change="handlePageChange">
        </zk-pagination>
      </view>
      <zk-tips></zk-tips>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useIMreturnStore } from "@/stores/modules/IMreturn/IMreturn";
import { onShow } from "@dcloudio/uni-app";
import { useToastStore } from "@/stores/modules/toast";
const toastStore = useToastStore();
const IMreturnstore = useIMreturnStore();
onShow(() => {
  IMreturnstore.getListReturnPage({});
  IMreturnstore.getDictList();
  IMreturnstore.getReturnTypeList();
});
const errMsg = ref("");
// 归还状态
const ReturnStatus = ref("");
// 归还类型
const ReturnType = ref("");
// 日期
const date = ref("");
// 搜索条件
const searchParam = ref("");
// 列表分页
const handlePageChange = async (data: any) => {
  console.log("分页", data);
  await IMreturnstore.getListReturnPage({
    pageNum: data.pageNum || 1,
    pageSize: data.pageSize || 10,
    searchParam: data.searchParam || "",
    StartDate: data.StartDate || "",
    EndDate: data.EndDate || "",
    ReturnStatus: data.ReturnStatus || "",
    ReturnType: data.ReturnType || "",
  });
};
//查询
const search = async () => {
  let StartDate = "";
  let EndDate = "";
  if (date.value != "" && date.value.length > 1) {
    StartDate = date.value[0];
    EndDate = date.value[1];
    console.log("日期", StartDate, EndDate);
  } else {
    StartDate = "";
    EndDate = "";
  }
  await handlePageChange({
    searchParam: searchParam.value || "",
    StartDate: StartDate || "",
    EndDate: EndDate || "",
    ReturnStatus: ReturnStatus.value || "",
    ReturnType: ReturnType.value || "",
  });
};
//清空搜索条件
const clearSearch = () => {
  searchParam.value = "";
  date.value = "";
  ReturnStatus.value = "";
  ReturnType.value = "";
};

// 详情
const goDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/InventoryManagement/IMreturn/addIMreturn/addIMreturn?LoanCode=${item.LoanCode}`,
  });
};
// 编辑
const editReturnOrder = (item: any) => {
  uni.navigateTo({
    url: `/pages/InventoryManagement/IMreturn/addIMreturn/addIMreturn?LoanCode=${item.LoanCode}&Edit='edit'`,
  });
};
</script>

<style lang="scss" scoped>
#inventoryManagement {
  position: relative;
  height: calc(552px - 64px);
  width: 98%;
  margin: auto;
  padding: 0 10px;
  border-radius: 10px;
  background: rgb(255, 255, 255);
  z-index: 1;
  margin-top: 10px;
  padding: 10px;
  ::v-deep .optionsList .option {
    padding: 5px 10px;
  }
  .search_box {
    justify-content: space-between;
    .search_item {
      width: 80%;
      justify-content: space-between;
    }
    .date_box {
      width: 216px;
    }
    .ipt_box {
      width: 120px;
    }
  }
  .table_box {
    padding: 16px 0 0 0;
    width: 100%;
    height: calc(100% - 40px);
    scroll-view {
      height: calc(100% - 76px);
      .table_body {
        width: 100%;
        height: 100%;
        .table_body_item {
          border-bottom: 1px solid rgb(244, 244, 244);
        }
        .table_body_item_cell {
          text-align: center;
          .handle_Box {
            justify-content: center;
            width: 100%;
            view {
              margin: 0 5px;
            }
          }
        }
      }
    }
    .table_header_item,
    .table_body_item {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: 40px;
      align-items: center;
      padding: 0 10px;
    }
    .table_header_item {
      width: 100%;
      border-radius: 6px;
      background: #f2f3f4;
      .title {
        color: #adafb8;
        font-family: HarmonyOS Sans SC;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>
